likwid/frontend/src/pages/manifesto.astro

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

<PublicLayout title="Manifesto" description="The technical and political vision behind Likwid: why governance infrastructure matters for distributed organizations.">
  <article class="manifesto-page">
    <header class="page-header">
      <span class="page-label">Manifesto</span>
      <h1>Democracy by Design</h1>
      <p class="lead">
        A technical and political vision for governance infrastructure in the digital age.
      </p>
    </header>

    <section class="manifesto-section">
      <h2>The Problem with Digital Governance</h2>
      <p>
        We have built extraordinary tools for communication, collaboration, and coordination. 
        Yet when it comes to collective decision-making—the core function of any democratic organization—we 
        still rely on methods designed for physical assemblies or, worse, tools designed for entirely different purposes.
      </p>
      <p>
        Open source projects make critical decisions in issue trackers. Political movements coordinate through 
        chat platforms. Associations run elections via email. These tools were not designed for governance, 
        and it shows.
      </p>
      <blockquote>
        <p>
          "The medium shapes the message. When we govern through tools designed for other purposes, 
          we inherit their assumptions, their limitations, and their biases."
        </p>
      </blockquote>
      <p>
        The result is predictable: decisions happen informally, participation is uneven, 
        moderation is opaque, and trust erodes over time. Organizations that should be models 
        of collective action become dominated by those with the most time, the loudest voices, 
        or the most technical access.
      </p>
    </section>

    <section class="manifesto-section">
      <h2>Governance as Infrastructure</h2>
      <p>
        Likwid treats governance not as a feature to be bolted onto other systems, but as 
        <strong>infrastructure</strong>—a foundational layer that organizations build upon.
      </p>
      <p>
        Just as we don't expect organizations to build their own databases or web servers, 
        they shouldn't need to build their own governance systems. They need infrastructure 
        that is:
      </p>
      <ul class="principle-list">
        <li>
          <strong>Reliable</strong> — Governance decisions are high-stakes. The system must be 
          consistent, auditable, and resistant to manipulation.
        </li>
        <li>
          <strong>Flexible</strong> — Organizations have different cultures, scales, and needs. 
          The infrastructure must adapt, not prescribe.
        </li>
        <li>
          <strong>Transparent</strong> — Power exercised in secret corrodes trust. Every action 
          that affects members must be visible and accountable.
        </li>
        <li>
          <strong>Accessible</strong> — Participation cannot be limited to those who can attend 
          synchronous meetings or follow high-volume discussions.
        </li>
      </ul>
    </section>

    <section class="manifesto-section">
      <h2>The Principles of Democracy Design</h2>
      
      <div class="principle-block">
        <h3>1. Information Must Be Understandable, Not Just Available</h3>
        <p>
          Transparency is necessary but not sufficient. Dumping raw data on members and calling 
          it "transparency" is a form of obfuscation. Information must be presented in ways that 
          enable understanding and informed participation.
        </p>
        <p>
          This means: layered complexity (quick overview to deep dive), interactive visualizations 
          where appropriate, clear explanations of process and context, and accessible language 
          alongside technical precision.
        </p>
      </div>

      <div class="principle-block">
        <h3>2. Deliberation Must Be Structured</h3>
        <p>
          Free-form discussion favors those with time and rhetorical skill. Unstructured debates 
          drift without resolution. Effective deliberation requires structure: clear phases, 
          defined roles, and mechanisms to surface constructive input.
        </p>
        <p>
          Likwid implements the <strong>Inform → Discuss → Decide</strong> workflow:
        </p>
        <ul>
          <li><strong>Inform:</strong> Members read and understand the proposal before discussion begins.</li>
          <li><strong>Discuss:</strong> Structured deliberation with facilitator tools to manage conversation.</li>
          <li><strong>Decide:</strong> Voting with appropriate methods for the decision at hand.</li>
        </ul>
      </div>

      <div class="principle-block">
        <h3>3. Voting Methods Must Match Decision Types</h3>
        <p>
          Simple majority voting fails for complex decisions. When there are multiple options, 
          competing priorities, or minority concerns that deserve protection, more sophisticated 
          methods are required.
        </p>
        <p>
          Different decisions call for different methods:
        </p>
        <ul>
          <li><strong>Schulze method</strong> for finding the option that would beat all others head-to-head.</li>
          <li><strong>STAR voting</strong> for balancing intensity of preference with broad support.</li>
          <li><strong>Quadratic voting</strong> for decisions where some members care more than others.</li>
          <li><strong>Approval voting</strong> for simple multi-option choices.</li>
          <li><strong>Ranked choice</strong> for instant runoff scenarios.</li>
        </ul>
        <p>
          Communities should choose methods that fit their culture and decision types, 
          not be locked into a single approach.
        </p>
      </div>

      <div class="principle-block">
        <h3>4. Delegation Must Be Flexible and Revocable</h3>
        <p>
          Not everyone can participate in every decision. Liquid delegation allows members 
          to delegate their voice to trusted representatives—while retaining 
          the ability to vote directly or revoke delegation at any time.
        </p>
        <p>
          This creates a spectrum between direct democracy (everyone votes on everything) and 
          representative democracy (elected delegates decide). Members choose their level of 
          engagement, creating natural expertise networks while maintaining individual sovereignty.
        </p>
      </div>

      <div class="principle-block">
        <h3>5. Moderation Must Be Visible and Accountable</h3>
        <p>
          Every community needs moderation. The question is whether it happens transparently 
          or in the shadows. Shadow banning, hidden removals, and opaque decisions erode trust 
          and create paranoia.
        </p>
        <p>
          In Likwid, every moderation action is logged with:
        </p>
        <ul>
          <li>Who took the action</li>
          <li>What rule or policy was violated</li>
          <li>What evidence supported the decision</li>
          <li>What the affected content was (preserved for appeal)</li>
        </ul>
        <p>
          The moderation ledger is cryptographically chained, making retroactive alteration detectable. 
          Trust is built through accountability, not through the appearance of an unmoderated space.
        </p>
      </div>

      <div class="principle-block">
        <h3>6. Privacy and Transparency Must Coexist</h3>
        <p>
          Some information should be public (moderation decisions, vote tallies, policy rationales). 
          Some should be private (individual vote choices, personal data, draft deliberations).
        </p>
        <p>
          Likwid separates <strong>civic identity</strong> (who you are in public discussions) from 
          <strong>voting identity</strong> (how you voted). This allows open participation in 
          deliberation while protecting ballot secrecy. Members can engage freely without fear 
          that their votes will be used against them.
        </p>
      </div>
    </section>

    <section class="manifesto-section">
      <h2>The Political Stakes</h2>
      <p>
        This is not merely a technical project. The design of governance tools is inherently political. 
        The systems we build encode assumptions about power, participation, and legitimacy.
      </p>
      <p>
        Platforms that prioritize engagement over deliberation produce polarization. 
        Systems that obscure moderation produce conspiracy theories. 
        Tools that favor the already-powerful entrench existing hierarchies.
      </p>
      <p>
        Likwid is built on the conviction that <strong>better tools can enable better governance</strong>—not 
        by removing human judgment, but by creating structures that encourage informed, inclusive, 
        and accountable decision-making.
      </p>
      <p>
        We believe that:
      </p>
      <ul class="belief-list">
        <li>Organizations should control their own governance infrastructure.</li>
        <li>Participation should not require technical expertise or unlimited time.</li>
        <li>Power should be visible and accountable, not hidden behind algorithms or administrative access.</li>
        <li>Minority voices deserve protection from simple majoritarianism.</li>
        <li>Governance software should be free, auditable, and community-controlled.</li>
      </ul>
    </section>

    <section class="manifesto-section">
      <h2>An Invitation</h2>
      <p>
        Likwid is not finished. It is not perfect. It is an ongoing experiment in building 
        governance infrastructure for the organizations that need it most.
      </p>
      <p>
        We invite:
      </p>
      <ul>
        <li><strong>Organizations</strong> to try Likwid, provide feedback, and help us understand what governance infrastructure needs to do.</li>
        <li><strong>Developers</strong> to contribute code, build plugins, and extend the platform's capabilities.</li>
        <li><strong>Researchers</strong> to study collective decision-making and help us understand what works.</li>
        <li><strong>Critics</strong> to challenge our assumptions and help us identify blind spots.</li>
      </ul>
      <p>
        Democracy is not a product. It is a practice. Likwid exists to make that practice easier, 
        more inclusive, and more accountable.
      </p>
    </section>

    <section class="manifesto-cta">
      <a href="/demo" class="btn-primary">Explore the Demo</a>
      <a href="/about" class="btn-secondary">Learn More About Likwid</a>
    </section>
  </article>
</PublicLayout>

<style>
  .manifesto-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }

  .page-header {
    text-align: center;
    padding: 3rem 0 4rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 3rem;
  }

  .page-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
  }

  .page-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }

  .lead {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .manifesto-section {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .manifesto-section:last-of-type {
    border-bottom: none;
  }

  .manifesto-section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-text);
  }

  .manifesto-section p {
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    color: var(--color-text);
  }

  blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  blockquote p {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-text);
    margin: 0;
  }

  .principle-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .principle-list li {
    padding: 1rem 0 1rem 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.7;
  }

  .principle-list li:last-child {
    border-bottom: none;
  }

  .principle-list li strong {
    color: var(--color-primary);
  }

  .principle-block {
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .principle-block h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text);
  }

  .principle-block p {
    margin-bottom: 1rem;
  }

  .principle-block p:last-child {
    margin-bottom: 0;
  }

  .principle-block ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
  }

  .principle-block li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    line-height: 1.6;
  }

  .principle-block li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-primary);
  }

  .principle-block li strong {
    color: var(--color-text);
  }

  .belief-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .belief-list li {
    padding: 0.75rem 0 0.75rem 2rem;
    position: relative;
    line-height: 1.7;
    font-size: 1.0625rem;
  }

  .belief-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 600;
  }

  .manifesto-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 3rem 0;
    flex-wrap: wrap;
  }

  .btn-primary {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--motion-fast) var(--easing-standard);
  }

  .btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--color-text);
    padding: 1rem 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 1rem;
    transition: all var(--motion-fast) var(--easing-standard);
  }

  .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  @media (max-width: 640px) {
    .page-header h1 {
      font-size: 2.25rem;
    }

    .principle-block {
      padding: 1.5rem;
    }
  }
</style>