:root {
  --ink: #111111;
  --paper: #ffffff;
  --space: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 36rem;
  margin: 0 auto;
  padding: calc(var(--space) * 2.25) var(--space) calc(var(--space) * 3);
}

.header { margin-bottom: calc(var(--space) * 2); }
.mark { display: block; margin-bottom: 1.25rem; }
.name {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.65rem, 3.5vw, 2rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.tagline {
  margin: 0.65rem 0 0;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.blurb { margin-bottom: calc(var(--space) * 2); }
.blurb p { margin: 0; max-width: 32rem; }

.projects h2 {
  margin: 0 0 0.75rem;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.empty {
  margin: 0;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 300;
}

.footer {
  margin-top: calc(var(--space) * 3);
  padding-top: var(--space);
  border-top: 1px solid #e6e6e6;
}
.links { font-size: 0.95rem; }
.links a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.links a:hover { opacity: 0.7; }
.sep { margin: 0 0.45rem; color: var(--ink); opacity: 0.4; }
.copy {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 300;
}