Add exhibition panel audio, color-code How-to boxes, and copy tweaks

- Add MO Exhibition Panel audio clip to the exhibition subpage
- Give each DIY How-to link box its own color (yellow/cyan/pink/blue)
- Reorder facilitate-meetups resources so Offtime Outlets index comes before Certificates of Completion
- Minor Ring Ring copy tweak (& instead of "and")

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: aaronzlewis

public/audio/2025-06-exhibition-panel.mp3

@@ -1,17 +1,23 @@
 ---
 /*
-  GuideLink.astro — a yellow "how-to" link row on the DIY guide landing page,
+  GuideLink.astro — a "how-to" link row on the DIY guide landing page,
   e.g. "01. GATHER PARTICIPANTS  >>>". Links to one of the four subpages.
+
+  `color` picks the box color: yellow (default), cyan, pink, or blue. Blue
+  gets white text to stay legible (matches the blue sub-heading bars
+  elsewhere on the site); the others keep black text.
 */
 interface Props {
   number: string; // e.g. "01"
   label: string;  // e.g. "Gather participants"
   href: string;   // e.g. "/diy/gather-participants"
+  color?: 'yellow' | 'cyan' | 'pink' | 'blue';
 }
-const { number, label, href } = Astro.props;
+const { number, label, href, color = 'yellow' } = Astro.props;
+const textColor = color === 'blue' ? 'var(--white)' : 'var(--black)';
 ---
 
-<a class="guide-link" href={href}>
+<a class="guide-link" href={href} style={`--guide-link-color: var(--mo-${color}); --guide-link-text: ${textColor};`}>
   <span class="guide-link__label font-display">{number}. {label}</span>
   <span class="guide-link__arrow font-display">&gt;&gt;&gt;</span>
 </a>
@@ -22,8 +28,8 @@ const { number, label, href } = Astro.props;
     justify-content: space-between;
     align-items: center;
     gap: var(--space-2);
-    background: var(--mo-yellow);
-    color: var(--black);
+    background: var(--guide-link-color);
+    color: var(--guide-link-text);
     text-decoration: none;
     padding: var(--space-2);
     min-height: var(--bar-section);
@@ -32,7 +38,7 @@ const { number, label, href } = Astro.props;
   }
   /* Hover: lighten the box 20% toward white. */
   .guide-link:hover {
-    background: color-mix(in srgb, var(--mo-yellow) 80%, white);
+    background: color-mix(in srgb, var(--guide-link-color) 80%, white);
   }
   .guide-link__arrow {
     transition: transform 0.15s ease;

src/components/GuideLink.astro

@@ -27,8 +27,8 @@ const resources = [
   { title: 'Offline Pledge Card',        description: 'ceremonially enter the month by signing the Offline Pledge together at orientation.',   href: '/resources/mo_pledge.pdf' },
   { title: 'Conversation Cards',         description: 'weekly prompts to use at each meetup.',                                              href: '/resources/mo_prompts.pdf' },
   { title: 'Facilitation Guides',        description: "beat-for-beat structure of the og MO meetups. take what's useful, leave the rest.", href: '/resources/mo_facilitator_guides.pdf' },
-  { title: 'Certificates of Completion', description: 'graduate from Month Offline in style.',                                             href: '/resources/mo_certificate.pdf' },
   { title: 'Offtime Outlets index',      description: 'invite ppl to add their creative outlet to a shared inventory.',                    href: '/resources/mo_offtime_outlets.pdf' },
+  { title: 'Certificates of Completion', description: 'graduate from Month Offline in style.',                                             href: '/resources/mo_certificate.pdf' },
 ];
 ---
 

src/pages/diy/facilitate-meetups.astro

@@ -16,6 +16,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import Hero from '../../components/Hero.astro';
 import SectionHeader from '../../components/SectionHeader.astro';
 import NextLink from '../../components/NextLink.astro';
+import AudioPlayer from '../../components/AudioPlayer.astro';
 ---
 
 <BaseLayout title="How to Host a Closing Exhibition — Month Offline" masthead="Month Offline > DIY Guide > Exhibition">
@@ -85,6 +86,14 @@ import NextLink from '../../components/NextLink.astro';
         spread the word by printing invitations and submitting to local
         newspapers or community calendars.
       </p>
+      <div class="exhibition__audio">
+        <AudioPlayer
+          title="MO Exhibition Panel"
+          byline="June 2025 * Temperance Alley Garden"
+          src="/audio/2025-06-exhibition-panel.mp3"
+        />
+      </div>
+
       <p class="body">
         set up tables where ppl can showcase their projects. invite 2-3
         participants to share their experience during a ~20min panel and give
@@ -135,6 +144,11 @@ import NextLink from '../../components/NextLink.astro';
     margin-top: var(--space-3);
   }
 
+  /* Vertical breathing room around the audio player. */
+  .exhibition__audio {
+    margin: var(--space-3) 0;
+  }
+
   /* Photos interspersed through the card. */
   .card__photo {
     width: 100%;

src/pages/diy/host-an-exhibition.astro

@@ -23,10 +23,10 @@ import NextLink from '../../components/NextLink.astro';
 
 // The four subpages, read in order. Each links to the next at its own foot.
 const guideLinks = [
-  { number: '01', label: 'Gather participants', href: '/diy/gather-participants' },
-  { number: '02', label: 'Get dumbphones',      href: '/diy/get-dumbphones' },
-  { number: '03', label: 'Facilitate meetups',  href: '/diy/facilitate-meetups' },
-  { number: '04', label: 'Host an exhibition',  href: '/diy/host-an-exhibition' },
+  { number: '01', label: 'Gather participants', href: '/diy/gather-participants', color: 'yellow' },
+  { number: '02', label: 'Get dumbphones',      href: '/diy/get-dumbphones',       color: 'cyan' },
+  { number: '03', label: 'Facilitate meetups',  href: '/diy/facilitate-meetups',   color: 'pink' },
+  { number: '04', label: 'Host an exhibition',  href: '/diy/host-an-exhibition',   color: 'blue' },
 ];
 
 // The 6-week program shown under "The basics".
@@ -50,7 +50,7 @@ const program = [
     <!-- 2. How to… -->
     <SectionHeader label="How to..." color="cyan" />
     {guideLinks.map((link) => (
-      <GuideLink number={link.number} label={link.label} href={link.href} />
+      <GuideLink number={link.number} label={link.label} href={link.href} color={link.color} />
     ))}
 
     <!-- 3. Letter -->
@@ -143,7 +143,7 @@ const program = [
     <section class="lydia">
       <div class="lydia__top">
         <p class="body">
-          ready to take the next step? submit an interest form and join the <a href="https://luma.com/calendar/cal-xd3qvSDnQeDHWEf" target="_blank" rel="noopener">next Q&amp;A session</a> to ask any questions, meet other aspiring organizers, and learn how to get dumbphones.
+          ready to take the next step? submit an interest form and join the <a href="https://luma.com/calendar/cal-xd3qvSDnQeDHWEf" target="_blank" rel="noopener">next Q&amp;A session</a> to ask any questions, meet other aspiring organizers, &amp; learn how to get dumbphones.
         </p>
         <img class="lydia__photo" src="/images/lydia.jpg" width="1200" height="1200" alt="Lydia, a Month Offline organizer" />
       </div>