---
import AppLayout from '../layouts/AppLayout.astro';

const user = Astro.locals.user;
---
<AppLayout title="Council manifesto" user={user}>
  <div class="page">
    <header class="page-header">
      <p class="label-sm eyebrow">Council manifesto</p>
      <h1 class="display-md page-title">A document, in draft.</h1>
    </header>
    <div class="reading-col">
      <p class="lead">
        The Council manifesto is being written together with the founding members.
        A first draft will land here before the kickoff session — followed by a window
        for council members to mark it up directly.
      </p>
    </div>
  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }
  .page-header {
    max-width: 44rem;
    margin-bottom: var(--space-8);
  }
  .eyebrow {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin-bottom: var(--space-3);
  }
  .page-title { margin: 0; }
  .reading-col { max-width: var(--reading-max); }
  .lead { color: var(--on-surface-variant); }

  @media (max-width: 767px) {
    .page { padding: var(--space-8) var(--space-5) var(--space-12); }
  }
</style>
