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/components/home/AboutPreview.astro

@@ -31,16 +31,11 @@
       </div>
 
       <div class="about-visual">
-        <div class="about-image-placeholder">
-          <div class="about-image-inner">
-            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-              <line x1="12" y1="19" x2="12" y2="23"></line>
-              <line x1="8" y1="23" x2="16" y2="23"></line>
-            </svg>
-            <span class="about-image-text">The Computer Guru</span>
-          </div>
+        <div class="about-photo-frame">
+          <picture>
+            <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>
         </div>
         <div class="about-visual-accent"></div>
       </div>
@@ -102,45 +97,21 @@
     justify-content: center;
   }
 
-  .about-image-placeholder {
+  .about-photo-frame {
     width: 100%;
-    aspect-ratio: 4 / 5;
-    max-width: 400px;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
+    max-width: 360px;
+    position: relative;
+    z-index: 1;
     border-radius: var(--radius-lg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1;
     overflow: hidden;
+    border: 2px solid hsl(200 85% 55% / 0.3);
+    box-shadow: 0 8px 32px hsl(200 85% 55% / 0.1);
   }
 
-  .about-image-placeholder::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background:
-      linear-gradient(135deg, hsl(200 85% 55% / 0.05), transparent 50%),
-      linear-gradient(315deg, hsl(270 60% 50% / 0.03), transparent 50%);
-  }
-
-  .about-image-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-4);
-    color: var(--color-text-muted);
-    position: relative;
-    z-index: 1;
-  }
-
-  .about-image-text {
-    font-size: var(--text-sm);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+  .about-photo-frame img {
+    width: 100%;
+    height: auto;
+    display: block;
   }
 
   .about-visual-accent {
@@ -165,10 +136,9 @@
       order: -1;
     }
 
-    .about-image-placeholder {
+    .about-photo-frame {
       max-width: 280px;
       margin-inline: auto;
-      aspect-ratio: 1;
     }
   }
 </style>

projects/radio-show/website/src/components/home/HeroSection.astro

@@ -14,7 +14,7 @@
       <span class="hero-title__line hero-title__line--1">The Computer</span>
       <span class="hero-title__line hero-title__line--2">Guru Show</span>
     </h1>
-    <p class="hero-tagline">Technology: Fun and Simple</p>
+    <p class="hero-tagline">Helping you deal with all of your technology needs while treating you like a person in the process.</p>
     <p class="hero-description">
       Your source for making sense of the tech world without the jargon.
       Hosted by Mike Swanson from Tucson, Arizona -- cutting through the noise
@@ -28,7 +28,7 @@
         </svg>
         Browse Episodes
       </a>
-      <a href="/subscribe" class="btn btn--ghost btn--lg">Subscribe</a>
+      <a href="/subscribe" class="btn btn--outline btn--lg">Subscribe</a>
     </div>
   </div>
 
@@ -166,7 +166,7 @@
     font-size: clamp(2.5rem, 6vw, 5rem);
     font-weight: 800;
     line-height: 1.05;
-    background: linear-gradient(135deg, var(--color-text-primary) 30%, var(--color-accent) 100%);
+    background: linear-gradient(135deg, hsl(220 10% 92%) 30%, var(--color-accent) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -184,6 +184,28 @@
     background-clip: text;
   }
 
+  [data-theme="light"] .hero-title__line {
+    background: linear-gradient(135deg, hsl(220 20% 15%) 30%, hsl(200 85% 35%) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  [data-theme="light"] .hero-title__line--2 {
+    background: linear-gradient(135deg, hsl(200 85% 35%) 0%, hsl(220 70% 40%) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  [data-theme="light"] .hero-tagline {
+    color: hsl(200 85% 35%);
+  }
+
+  [data-theme="light"] .hero-description {
+    color: hsl(220 15% 35%);
+  }
+
   .hero-tagline {
     font-size: var(--text-xl);
     color: var(--color-accent);
@@ -215,6 +237,28 @@
     font-size: var(--text-base);
   }
 
+  .btn--outline {
+    background: transparent;
+    color: hsl(220 10% 92%);
+    border: 1.5px solid hsl(200 85% 55% / 0.5);
+    transition: all var(--transition-fast);
+  }
+  .btn--outline:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    background: hsl(200 85% 55% / 0.08);
+  }
+
+  [data-theme="light"] .btn--outline {
+    color: hsl(220 20% 25%);
+    border-color: hsl(200 85% 42% / 0.5);
+  }
+  [data-theme="light"] .btn--outline:hover {
+    border-color: hsl(200 85% 42%);
+    color: hsl(200 85% 42%);
+    background: hsl(200 85% 42% / 0.08);
+  }
+
   /* Scroll hint */
   .hero-scroll-hint {
     position: absolute;