:root {
  --cream: #F5F0E8;
  --warm: #EDE6D6;
  --paper: #FAF7F2;
  --ink: #1C1A16;
  --ink-mid: #6B6456;
  --ink-light: #A09880;
  --accent: #C9E265;
  --rust: #D4522A;
  --border: #DDD8CC;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'DM Sans', sans-serif; background: var(--paper); color: var(--ink); overflow-x: hidden; width: 100%; }

/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: #1C1A16; padding: 0 48px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: #C9E265; text-decoration: none; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.55); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; transition: color 0.2s, background 0.2s; white-space: nowrap; }
.nav-links a:hover { color: #ffffff; background: rgba(255,255,255,0.08); }
.nav-links .sep { font-size: 0.55rem; color: rgba(255,255,255,0.2); }

@media (max-width: 600px) {
  nav { padding: 0 16px; }
  .nav-links a { padding: 5px 7px; font-size: 0.65rem; }
}