:root {
  color-scheme: light dark;
  --ink: #121417;
  --paper: #f4f4f1;
  --pink: #ff3d8b;
  --bg: var(--paper);
  --text: var(--ink);
  --muted: #5f636a;
  --line: #dcdcd6;
  --chip: #ffc9de;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--ink); --text: var(--paper); --muted: #9aa0a8; --line: #2a2e33; }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 var(--sans);
}
a { color: inherit; text-decoration-color: var(--pink); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--pink); }

.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding-inline: 1rem; }
main { flex: 1; padding: clamp(3rem, 12vh, 7rem) 0 3rem; }

h1 { margin: 0; }
.lockup { display: block; width: min(100%, 22rem); height: auto; color: var(--text); }
.lockup .labs { fill: var(--muted); }

/* The odd pixel blinks like a cursor, unless the visitor asks for less motion. */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.pixel { animation: blink 1.1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .pixel { animation: none; } }

.lede { margin: 1.5rem 0 0; font-size: 1.25rem; }

section { margin-top: 3.5rem; }
h2 { margin: 0 0 1rem; font: 500 0.875rem/1.4 var(--mono); color: var(--muted); letter-spacing: 0.02em; }

.products { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.products li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.chip { font: 700 0.95rem/1 var(--mono); padding: 0.3rem 0.5rem; border-radius: 0.35rem; background: var(--chip); color: var(--ink); }
.product-text { flex: 1 1 18rem; }
.status { font: 500 0.8rem/1 var(--mono); color: var(--muted); white-space: nowrap; }

.contact { margin: 0; font: 500 1.05rem/1.4 var(--mono); }

footer { padding: 2rem 0; font: 0.8rem/1.4 var(--mono); color: var(--muted); }