Add past cohorts directory, offtime outlets resource, and ticker/photo tweaks

- Split the cohort directory by a new Status column (Upcoming/Past),
  adding a "Past cohorts" section with gray CohortRows and dropping the
  sign-up arrow when a row has no Form link
- Add "Offtime Outlets index" resource card to the facilitation page
- Add "CALL 1-844-OFFLINE" to the ticker
- Add the "what to bring" illustration above its section header
- Bump CohortRow header text to the Workbench "Overexposed" variation
- Fix cropped photos in the homepage photo strip and add spacing above it

Author: aaronzlewis

CLAUDE.md

@@ -37,6 +37,7 @@ in `src/lib/cohorts.js`):
 - `ORGANIZERS` — organizer name(s)
 - `FORM` — sign-up form link
 - `MONTH` — start month/date
+- `STATUS` — `Upcoming` or `Past`; controls whether the cohort lists under "Month Offline locations" or "Past cohorts" on the Home page
 
 A non-technical teammate edits this sheet directly to add or update cohorts — no admin UI needed on the site itself. New rows appear on the next build (see `getCohorts()` in `src/lib/cohorts.js`).
 

public/images/photo-1.png

@@ -4,25 +4,34 @@
 
   This is the component the Google Sheet data will map onto: each row in
   the sheet (city, state, organizer, sign-up link, start date) becomes one
-  CohortRow. For now the Home page passes in placeholder rows; wiring it to
-  the published CSV is the next step.
+  CohortRow.
+
+  `href` is optional. When the sheet's FORM cell is blank there's nothing to
+  link to, so the row renders as a plain <div> instead of an <a> and the
+  trailing arrow is left off.
 */
 interface Props {
   location: string;   // e.g. "New York City, NY"
   date: string;       // e.g. "July 2026"
   organizer: string;  // e.g. "Melissa"
-  href: string;       // the cohort's external sign-up form
+  href?: string;       // the cohort's external sign-up form, if any
+  color?: 'yellow' | 'gray'; // yellow (default) for upcoming, gray for past cohorts
 }
-const { location, date, organizer, href } = Astro.props;
+const { location, date, organizer, href, color = 'yellow' } = Astro.props;
+const hasLink = Boolean(href);
+
+// Astro lets a lowercase variable stand in for the tag name, so the row is
+// an <a> when there's somewhere to link to and a <div> when there isn't.
+const Tag = hasLink ? 'a' : 'div';
 ---
 
-<a class="cohort-row" href={href} target="_blank" rel="noopener">
+<Tag class={`cohort-row cohort-row--${color}`} {...hasLink ? { href, target: '_blank', rel: 'noopener' } : {}}>
   <div class="cohort-row__head">
     <span class="cohort-row__title font-display">{location} – {date}</span>
-    <span class="cohort-row__arrow font-display">&gt;&gt;&gt;</span>
+    {hasLink && <span class="cohort-row__arrow font-display">&gt;&gt;&gt;</span>}
   </div>
   <p class="cohort-row__organizer">Organized by {organizer}.</p>
-</a>
+</Tag>
 
 <style>
   .cohort-row {
@@ -39,6 +48,14 @@ const { location, date, organizer, href } = Astro.props;
     background: color-mix(in srgb, var(--mo-yellow) 80%, white);
   }
 
+  /* Gray variant — past cohorts, matching the "Read all about it" press box. */
+  .cohort-row--gray {
+    background: var(--mo-gray);
+  }
+  .cohort-row--gray:hover {
+    background: color-mix(in srgb, var(--mo-gray) 80%, white);
+  }
+
   .cohort-row__head {
     display: flex;
     justify-content: space-between;
@@ -49,6 +66,15 @@ const { location, date, organizer, href } = Astro.props;
   .cohort-row__title,
   .cohort-row__arrow {
     font-size: var(--size-body);
+    /* Workbench has no real weight (wght) axis — it only has BLED and SCAN,
+       so `font-weight` was just triggering the browser's faux-bold, which
+       looked muddy on a pixel font like this. The font's own named
+       instances step up in heaviness by raising SCAN (letters go from
+       "Delicate" through "Touching" to "Maximum" as the scanlines merge).
+       "Overexposed" (SCAN 67) is a couple steps past the site-wide default
+       of "Touching" (SCAN 21, set via --workbench-axes), so this row reads
+       noticeably heavier than the rest of the page. */
+    font-variation-settings: 'BLED' 0, 'SCAN' 67;
   }
   .cohort-row__arrow {
     transition: transform 0.15s ease;

public/images/photo-2.png

@@ -87,10 +87,10 @@ import '../styles/global.css';
       <div class="ticker font-display">
         <div class="ticker__track">
           <span class="ticker__group">
-            <span class="ticker-date">{initialDate}</span> * <span class="ticker-time">{initialTime}</span> * <a class="ticker__link" href="https://www.offline.community">WWW.OFFLINE.COMMUNITY</a> * ALUMNI COUNTER: 400 PPL * CITY COUNTER: 5 * JOIN THE CHALLENGE * DITCH THE DOOMSCROLL * LOG OFF AND LINK UP * TOUCH GRASS *
+            <span class="ticker-date">{initialDate}</span> * <span class="ticker-time">{initialTime}</span> * <a class="ticker__link" href="https://www.offline.community">WWW.OFFLINE.COMMUNITY</a> * ALUMNI COUNTER: 400 PPL * CITY COUNTER: 5 * JOIN THE CHALLENGE * DITCH THE DOOMSCROLL * LOG OFF AND LINK UP * TOUCH GRASS * CALL 1-844-OFFLINE *
           </span>
           <span class="ticker__group" aria-hidden="true">
-            <span class="ticker-date">{initialDate}</span> * <span class="ticker-time">{initialTime}</span> * <a class="ticker__link" href="https://www.offline.community" tabindex="-1">WWW.OFFLINE.COMMUNITY</a> * ALUMNI COUNTER: 400 PPL * CITY COUNTER: 5 * JOIN THE CHALLENGE * DITCH THE DOOMSCROLL * LOG OFF AND LINK UP * TOUCH GRASS *
+            <span class="ticker-date">{initialDate}</span> * <span class="ticker-time">{initialTime}</span> * <a class="ticker__link" href="https://www.offline.community" tabindex="-1">WWW.OFFLINE.COMMUNITY</a> * ALUMNI COUNTER: 400 PPL * CITY COUNTER: 5 * JOIN THE CHALLENGE * DITCH THE DOOMSCROLL * LOG OFF AND LINK UP * TOUCH GRASS * CALL 1-844-OFFLINE *
           </span>
         </div>
       </div>

public/images/photo-3.png

@@ -10,7 +10,7 @@ import Papa from 'papaparse';
 // The sheet has one row per cohort. Header names are normalized to UPPERCASE
 // (see transformHeader below) so a stray capitalization or space in the sheet
 // won't silently blank out a column. Current headers in the sheet:
-//   CITY | STATE | ORGANIZERS | FORM | MONTH
+//   CITY | STATE | ORGANIZERS | FORM | MONTH | STATUS
 // NB: the organizer column is "ORGANIZERS" (plural) in the live sheet — it must
 // match exactly (after uppercasing), so this can't be "ORGANIZER".
 const COLUMNS = {
@@ -19,12 +19,19 @@ const COLUMNS = {
   organizer: 'ORGANIZERS',
   signupUrl: 'FORM',
   startDate: 'MONTH',
+  status: 'STATUS',
 };
 
 /**
  * Fetch + parse the sheet, returning an array of cohort objects shaped for
  * the CohortRow component:
- *   { location, date, organizer, href }
+ *   { location, date, organizer, href, status }
+ *
+ * `status` is lowercased to either "past" or "upcoming" — the Home page uses
+ * it to sort each cohort into the "Month Offline locations" or "Past
+ * cohorts" section. Anything other than "Past" in the sheet (including a
+ * blank cell) is treated as "upcoming", so existing rows without a Status
+ * cell yet keep showing up under Locations.
  *
  * If SHEET_CSV_URL isn't set yet, returns an empty array (and warns), so the
  * site still builds before the sheet is wired up.
@@ -68,12 +75,16 @@ export async function getCohorts() {
     .map((row) => {
       const city = (row[COLUMNS.city] || '').trim();
       const state = (row[COLUMNS.state] || '').trim();
+      const status = (row[COLUMNS.status] || '').trim().toLowerCase();
       return {
         // "City, State" — but tolerate a missing state.
         location: [city, state].filter(Boolean).join(', '),
         date: (row[COLUMNS.startDate] || '').trim(),
         organizer: (row[COLUMNS.organizer] || '').trim(),
-        href: (row[COLUMNS.signupUrl] || '').trim() || '#',
+        // Empty string (not "#") when there's no sign-up link, so CohortRow
+        // can tell "no link" apart from a real href and drop the arrow.
+        href: (row[COLUMNS.signupUrl] || '').trim(),
+        status: status === 'past' ? 'past' : 'upcoming',
       };
     })
     // Drop any row without at least a city (e.g. stray blank rows).

public/images/what_to_bring.png

@@ -28,6 +28,7 @@ const resources = [
   { 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' },
 ];
 ---
 
@@ -64,6 +65,13 @@ const resources = [
         detailed facilitation guides for each meetup, or create ur own!
       </p>
 
+      <img
+        class="card__photo photo-bring"
+        src="/images/what_to_bring.png"
+        width="980"
+        height="218"
+        alt="A handbell, a box of crayons, a book, and a portable speaker"
+      />
       <h3 class="label">What should I bring?</h3>
       <ul class="bring">
         <li>✶ a handbell to easily get the attention of a large group</li>
@@ -211,6 +219,21 @@ const resources = [
     margin-top: 0;
   }
 
+  /* The "what 2 bring" illustration sits flush on top of its label bar,
+     like the items are resting on a shelf, so it drops the usual gap
+     below the photo and the label's own top margin. */
+  .photo-bring {
+    display: block;
+    width: 440px;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0;
+  }
+  .photo-bring + .label {
+    margin-top: 0;
+  }
+
   /* Vertical breathing room around the audio player in the card. */
   .card__audio {
     margin: var(--space-3) 0;