/* moopa.app: Moopa's own colours and type (moopa static/moopa.css), for two small pages. */
:root {
  --primary: oklch(27% 0.014 250);
  --signal: oklch(52% 0.150 258);
  --signal-deep: oklch(45% 0.150 258);
  --ink: oklch(19.5% 0.020 41);
  --ink-secondary: oklch(33% 0.022 41);
  --ink-mute: oklch(50% 0.018 41);
  --canvas: oklch(97.6% 0.002 80);
  --surface: oklch(99% 0.001 80);
  --hairline: oklch(88% 0.004 80);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
}

a { color: var(--signal); text-underline-offset: 2px; }
a:hover { color: var(--signal-deep); }

.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }

header { padding: 1.75rem 0; }
.wordmark { color: var(--primary); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; }
.wordmark:hover { color: var(--primary); }

main { flex: 1; padding: 2rem 0 4rem; }

h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--primary); }
h2 { font-size: 1.125rem; margin: 2.25rem 0 0.5rem; color: var(--primary); }
p, li { color: var(--ink-secondary); }
.lede { font-size: 1.1875rem; max-width: 36rem; }
.eyebrow { color: var(--ink-mute); font-size: 0.875rem; margin: 0 0 0.5rem; }

.card {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.card h2 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

ul { padding-left: 1.25rem; }

footer { border-top: 1px solid var(--hairline); padding: 1.5rem 0; font-size: 0.875rem; color: var(--ink-mute); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
footer a { color: var(--ink-mute); }