project-bifrost-platform/src/pages/members.astro

---
import AppLayout from '../layouts/AppLayout.astro';
import Avatar from '../components/Avatar.astro';
import { getAllCabMembers } from '../lib/db';
import { pigmentForId, readFocusTags } from '../lib/format';

const user = Astro.locals.user;
const members = getAllCabMembers();

function memberSinceLabel(member: { cab_joined_date: string | null; created_at: string }): string {
  const iso = member.cab_joined_date ?? member.created_at;
  const normalised = iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z';
  return new Intl.DateTimeFormat('en-GB', {
    month: 'long', year: 'numeric', timeZone: 'Europe/Copenhagen',
  }).format(new Date(normalised));
}
---
<AppLayout title="Members" user={user}>
  <div class="page">

    <header class="members-head">
      <h1 class="members-title">The council.</h1>
      <p class="members-sub">
        An invited circle of operators shaping what Project Bifrost becomes.
      </p>
    </header>

    <hr class="members-rule" />

    <ul class="members-list" aria-label="Council members">
      {members.map(m => {
        const pigment = pigmentForId(m.id);
        const tags = readFocusTags(m.focus_tags);
        const isMe = m.id === user.id;
        const metaParts = [m.title, m.organisation, `Member since ${memberSinceLabel(m)}`].filter(Boolean);
        return (
          <li
            class:list={['m-row', { 'm-row--me': isMe }]}
            style={`--row-pigment: ${pigment.token}; --row-pigment-hex: ${pigment.hex};`}
          >
            <div class="m-col-avatar">
              <Avatar id={m.id} name={m.name} size={52} />
            </div>

            <div class="m-col-body">
              <h2 class="m-name">
                <span class="m-name-text">{m.name}</span>
                {isMe && <span class="m-you label-sm">You</span>}
              </h2>

              <p class="m-meta">{metaParts.join(' · ')}</p>

              {m.pull_quote && (
                <blockquote class="m-quote">{m.pull_quote}</blockquote>
              )}
            </div>

            {tags.length > 0 && (
              <ul class="m-tags" aria-label="Focus areas">
                {tags.map(t => <li class="m-tag">{t}</li>)}
              </ul>
            )}
          </li>
        );
      })}

      {members.length === 0 && (
        <li class="m-empty body-md">The council is still being formed.</li>
      )}
    </ul>

  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  .members-head { margin-bottom: var(--space-6); max-width: 46rem; }

  .members-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-display-md);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--on-surface);
    margin: 0;
  }

  .members-sub {
    color: var(--on-surface-variant);
    margin-top: var(--space-3);
    max-width: 29rem;
  }

  .members-rule {
    border: none;
    height: 0.5px;
    background: var(--surface-card-border);
    margin: 0 0 var(--space-8) 0;
  }

  .members-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .m-row {
    display: grid;
    grid-template-columns: 60px 1fr 130px;
    gap: 18px;
    padding: var(--space-5) var(--space-3);
    border-bottom: 0.5px solid var(--surface-card-border);
    align-items: start;
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .m-row--me {
    background: color-mix(in oklab, var(--row-pigment) 4%, transparent);
    border-radius: var(--radius-md);
    border-bottom-color: transparent;
  }

  .m-col-avatar { display: flex; justify-content: center; padding-top: 2px; }
  .m-col-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

  .m-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--on-surface);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }

  .m-you {
    font-family: var(--font-sans);
    font-style: normal;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--pigment-terracotta);
    font-weight: 600;
    position: relative;
    top: -2px;
  }

  .m-meta {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wide);
  }

  .m-quote {
    margin: var(--space-2) 0 0;
    padding-left: 12px;
    border-left: 2px solid color-mix(in oklab, var(--row-pigment) 40%, transparent);
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--on-surface);
    max-width: 38rem;
  }
  .m-row--me .m-quote {
    border-left-color: color-mix(in oklab, var(--row-pigment) 50%, transparent);
  }

  .m-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
  }
  .m-tag {
    background: color-mix(in oklab, var(--row-pigment) 15%, transparent);
    color: var(--row-pigment);
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-label-sm);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
  }

  .m-empty {
    color: var(--on-surface-muted);
    padding: var(--space-6) 0;
  }

  @media (max-width: 720px) {
    .page { padding: var(--space-8) var(--space-5) var(--space-12); }
    .m-row { grid-template-columns: 52px 1fr; }
    .m-tags {
      grid-column: 1 / -1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      margin-top: var(--space-2);
    }
  }
</style>