Milestone Stamp

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 34,
  slug: 'milestone-stamp',
  name: 'Milestone Stamp',
  category: 'maturity-process',
  subcategory: 'instruments',
  pillar: 'de',
  description: 'A datestamped milestone marker, ink-roller style — for SHIPPED, APPROVED, AUDITED moments.',
  spec: `## Intent
Some moments deserve an ink stamp. A milestone marker records a single shipped artifact with its version, date, and stamper. Designed to read as physical: rotated, slightly off-grid, hard-shadowed.

## Acceptance Criteria
- [ ] Version + verb (e.g. "v0.4.0 SHIPPED") dominant
- [ ] Date in mono, smaller
- [ ] Visibly rotated, hard offset shadow

## Constraints
- No JS
- Theme-aware via tokens`,
  tags: ['stamp', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: false },
};

const stamp = {
  verb: 'SHIPPED',
  artifact: 'v0.4.0',
  date: '2026-05-19',
  by: '@platform',
};
---

<div class="w-full bg-paper text-ink border-4 border-ink p-5 flex items-center justify-center overflow-hidden">
  <div class="relative max-w-full">
    <div
      class="border-[5px] border-attention text-attention bg-paper px-4 py-3 shadow-[5px_5px_0_0_var(--color-ink)]"
      style="transform: rotate(-6deg); transform-origin: center;"
      role="img"
      aria-label={`${stamp.artifact} ${stamp.verb} on ${stamp.date} by ${stamp.by}`}
    >
      <div class="flex items-baseline gap-2 border-b-2 border-attention pb-1">
        <span class="font-black uppercase tracking-widest text-[10px]">// MILESTONE</span>
        <span class="font-mono text-[9px] tracking-widest opacity-80 ms-auto">{stamp.by}</span>
      </div>
      <div class="mt-1 flex items-baseline gap-2 flex-wrap">
        <span class="font-black text-2xl tracking-tight">{stamp.artifact}</span>
        <span class="font-black uppercase text-xl tracking-wider">{stamp.verb}</span>
      </div>
      <div class="mt-1 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-widest">
        <span class="inline-block w-2 h-2 bg-attention" aria-hidden="true"></span>
        <span>{stamp.date}</span>
      </div>
    </div>
  </div>
</div>