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

:root {
  --mint: #3ECBA5;
  --mint-light: #E8FAF4;
  --ink: #1A1A1A;
  --ink-mid: #6B6B6B;
  --ink-faint: #E8E8E2;
  --cream: #FAFAF7;
  --white: #FFFFFF;
  --accent-orange: #FF6B35;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

body { font-family: var(--sans); background: var(--cream); color: var(--ink); }

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  border-bottom: 1px solid var(--ink-faint);
}
.nav-name {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: 13px;
  color: var(--ink-mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--ink); }

@media (max-width: 700px) {
  nav { padding: 20px 24px; }
}