/* Crest design language v1 (docs/design/crest-design-language.md).
   Sharp corners, warm paper, ink text, one gradient moment per view. */

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 7%);
  --muted: hsl(0 0% 38%);
  --faint: hsl(0 0% 62%);
  --line: hsl(45 5% 85%);
  --surface: hsl(45 18% 96%);
  --gradient: linear-gradient(100deg, #8b5cf6 0%, #3b82f6 52%, #2dd4bf 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--foreground); color: var(--background); }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main { flex: 1; }

.micro {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-hairline {
  height: 2px;
  width: 72px;
  background: var(--gradient);
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 55vh;
  gap: 20px;
  padding-top: 48px;
}

.mark { width: 72px; height: 72px; object-fit: contain; }

.what, .how { padding: 32px 0; border-top: 1px solid var(--line); }
.blocks { display: grid; gap: 24px; margin-top: 16px; }
.block h3 { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.block p, .how p { color: var(--muted); font-size: 15px; }
.how p { margin-top: 12px; max-width: 36rem; }
@media (min-width: 640px) { .blocks { grid-template-columns: 1fr 1fr 1fr; } }

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.hero .lede { color: var(--muted); max-width: 34rem; }

article { padding: 56px 0 40px; }
article h1 { font-size: 1.9rem; letter-spacing: -0.03em; margin: 8px 0 16px; }
article h2 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 28px 0 8px; }
article p { margin: 0 0 12px; color: var(--foreground); }
article ul { margin: 0 0 12px 1.2rem; }
article li { margin-bottom: 6px; }

footer {
  border-top: 1px solid var(--line);
  padding: 20px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
}

footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--foreground); }

a.home { color: var(--muted); text-decoration: none; font-size: 14px; }
a.home:hover { color: var(--foreground); }
header.site { padding: 20px 0 0; }