/* First Person — brand stab v0 (UNRATIFIED — see CLAUDE.md).
   Paper ground, ink text, spruce accent. The motif is the measurement
   baseline: a ruled line, tick marks, one marked point. */

:root {
  --paper: #FAF9F5;
  --ink: #20242B;
  --sub: #565B63;
  --muted: #6E7370;
  --rule: #E3E1D9;
  --accent: #2F5D50;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Inter", Helvetica, Arial, system-ui, sans-serif;
}

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

html { color-scheme: light; }

body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 28px; }
a { color: var(--accent); }

nav .wrap {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 30px; padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.mark {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.mark span { color: var(--accent); }
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark-logo { display: block; border-radius: 4px; }
.tag { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); }

.hero { padding: 110px 0 40px; }
.eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 28px;
}
h1 {
  font-size: 34px; font-weight: normal; line-height: 1.28;
  letter-spacing: -0.01em; max-width: 24ch; margin-bottom: 24px;
}
.lede { font-size: 18.5px; color: var(--sub); max-width: 52ch; margin-bottom: 12px; }

.baseline { margin: 56px 0 48px; }
.baseline svg { width: 100%; height: auto; display: block; }

.status {
  font-family: var(--sans); font-size: 13.5px; color: var(--muted);
  padding: 26px 0 110px;
}
.status b { color: var(--ink); font-weight: 600; }

footer {
  border-top: 1px solid var(--rule); padding: 26px 0 70px;
  font-family: var(--sans); font-size: 12px; color: var(--muted);
}
footer .wrap { display: flex; justify-content: space-between; align-items: baseline; }
footer a { text-decoration: none; font-weight: 600; }

@media (max-width: 640px) {
  .hero { padding: 64px 0 24px; }
  h1 { font-size: 27px; max-width: none; }
  footer .wrap, nav .wrap { flex-direction: column; gap: 16px; align-items: flex-start; }
}