Radio show website: light mode fix, headshot, motto update

- Fix hero title/tagline/description text invisible in light mode
- Replace ghost button with accent-bordered outline button for contrast
- Add [data-theme="light"] overrides for hero gradients
- Add Mike Swanson headshot (WebP 11KB + JPEG fallback) to about page and home
- Replace SVG placeholders with real photo (circular crop on about, framed on home)
- Update show motto across all locations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

projects/radio-show/website/src/pages/about.astro

@@ -9,7 +9,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <span class="badge fade-in">About</span>
       <h1 class="hero__title fade-in">About the Show</h1>
       <p class="hero__subtitle fade-in">
-        Technology: Fun and Simple. A podcast dedicated to breaking down the biggest stories in tech for everyone.
+        Helping you deal with all of your technology needs while treating you like a person in the process.
       </p>
     </div>
   </section>
@@ -18,14 +18,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   <section class="section">
     <div class="container">
       <div class="host-card card fade-in">
-        <div class="host-card__icon" aria-hidden="true">
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5z"/>
-            <path d="M17 10v1a5 5 0 0 1-10 0v-1"/>
-            <line x1="12" y1="19" x2="12" y2="22"/>
-            <line x1="8" y1="22" x2="16" y2="22"/>
-          </svg>
-        </div>
+        <picture class="host-card__photo">
+          <source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
+          <img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
+        </picture>
         <h2 class="host-card__name">Mike Swanson</h2>
         <p class="host-card__title">The Computer Guru</p>
         <p class="host-card__bio">
@@ -175,10 +171,20 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     margin-inline: auto;
     padding: var(--space-12) var(--space-8);
   }
-  .host-card__icon {
-    color: var(--color-accent);
+  .host-card__photo {
+    display: block;
     margin-bottom: var(--space-6);
   }
+  .host-card__photo img {
+    width: 160px;
+    height: 160px;
+    object-fit: cover;
+    object-position: center 15%;
+    border-radius: 50%;
+    margin-inline: auto;
+    border: 3px solid var(--color-accent);
+    box-shadow: 0 0 24px var(--color-accent-glow);
+  }
   .host-card__name {
     font-size: var(--text-3xl);
     margin-bottom: var(--space-2);

projects/radio-show/website/src/pages/feed.xml.ts

@@ -12,7 +12,7 @@ export async function GET(context: APIContext) {
   return rss({
     title: 'The Computer Guru Show',
     description:
-      'Technology: Fun and Simple. Hosted by Mike Swanson from Tucson, Arizona.',
+      'Helping you deal with all of your technology needs while treating you like a person in the process.',
     site: context.site!.toString(),
     items: sortedEpisodes.map((ep) => ({
       title: ep.data.title,

projects/radio-show/website/src/pages/index.astro

@@ -9,7 +9,7 @@ import AboutPreview from '../components/home/AboutPreview.astro';
 import SubscribeCTA from '../components/home/SubscribeCTA.astro';
 ---
 
-<BaseLayout title="Home" description="The Computer Guru Show - Technology: Fun and Simple. Your source for making sense of the tech world, hosted by Mike Swanson from Tucson, Arizona.">
+<BaseLayout title="Home" description="The Computer Guru Show - Helping you deal with all of your technology needs while treating you like a person in the process.">
   <HeroSection />
   <LatestEpisodes />
   <FeaturedClassics />