:root {
  --paper: #FFFDF5;
  --ink: #161616;
  --grey: #7c7b85;

  /* per-product accents */
  --charple: #6B50FF;
  --mint: #12C78F;
  --pink: #FF6DFF;
}

/* follow the OS — invert ground/ink in dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161616;
    --ink: #FFFDF5;
    --grey: #8b8a94;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, Menlo, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* narrow centered column, floating in whitespace — no borders anywhere */
.frame {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 5rem) 1.5rem 4rem;
}

.row { border: 0; }

/* ── header ────────────────────────────────────────────── */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(3rem, 10vw, 6rem);
}

.wordmark { font-weight: 700; font-size: 0.875rem; }

.nav { display: flex; gap: 1.25rem; font-size: 0.8125rem; }
.nav a { color: var(--grey); }
.nav a:hover { color: var(--ink); }

/* ── hero ──────────────────────────────────────────────── */
.hero { margin-bottom: clamp(3rem, 10vw, 6rem); }

.display {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
}

/* ── flock: doves fly off top-left, loop back, land from bottom-right ── */
.flock { display: inline-flex; gap: 0.15em; cursor: default; }

.dove {
  display: inline-block;
  will-change: transform, opacity;
}

.flock.flying .dove {
  animation: fly 1.15s cubic-bezier(0.5, 0, 0.4, 1) both;
}
/* stagger so they leave (and return) in sequence, like a real flock */
.flock.flying .dove:nth-child(1) { animation-delay: 0s; }
.flock.flying .dove:nth-child(2) { animation-delay: 0.1s; }
.flock.flying .dove:nth-child(3) { animation-delay: 0.2s; }

@keyframes fly {
  0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  /* climb out through the top-left, banking + shrinking into the distance */
  35%  { transform: translate(-65vw, -75vh) rotate(-28deg) scale(0.4); opacity: 0; }
  /* teleport (still invisible) to far bottom-right */
  36%  { transform: translate(65vw, 75vh) rotate(18deg) scale(0.4); opacity: 0; }
  /* swoop back in and land in place */
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}

.lede {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--grey);
}

/* ── product index ─────────────────────────────────────── */
.index { margin-bottom: clamp(3rem, 10vw, 6rem); }

.product {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
}

.p-name { font-weight: 700; }
.p-desc { color: var(--grey); text-align: right; }
.p-tag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey);
  white-space: nowrap;
}

/* hover: just tint the name in the product color — quiet */
.product:hover .p-name,
.product:focus-visible .p-name { color: var(--c); }
.product:focus-visible { outline: none; }

/* ── lab ───────────────────────────────────────────────── */
.lab { margin-bottom: clamp(3rem, 10vw, 6rem); }

.manifesto {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ── colophon ──────────────────────────────────────────── */
.colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--grey);
}

.colophon a:hover { color: var(--ink); }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 540px) {
  .product {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.6rem 0;
  }
  .p-tag { display: none; }
  .p-desc { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .flock.flying .dove { animation: none !important; }
}