/* ── RESET & TOKENS ─────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1a1612;
  --surface:#231f1a;
  --grid-bg:#2a2520;
  --cell:#332e28;
  --cell-border:#3d3730;
  --accent:#e8c97a;
  --accent2:#c47b5a;
  --accent3:#7ab8c4;
  --text:#e8e0d4;
  --text-dim:#8a8070;
  --shadow:rgba(0,0,0,0.5);
}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:'DM Mono',monospace}

/* Canvas helper for rounded rectangles */
canvas{display:block}
/* ── NAV ─────────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:500;
  background:rgba(26,22,18,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cell-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:56px;
}
.nav-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.4rem;letter-spacing:0.12em;color:var(--text);
  text-decoration:none;cursor:pointer;
}
.nav-links{display:flex;gap:4px}
.nav-link{
  font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;
  padding:6px 14px;border-radius:5px;
  transition:all 0.15s;cursor:pointer;border:none;background:none;
  font-family:'DM Mono',monospace;
}
.nav-link:hover,.nav-link.active{color:var(--accent);background:rgba(232,201,122,0.08)}
.nav-link.active{border-bottom:2px solid var(--accent);border-radius:5px 5px 0 0}

.page{display:none;animation:fadeIn 0.3s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── SHARED CONTENT STYLES ───────────────────────────────── */
.content{max-width:860px;margin:0 auto;padding:60px 24px}
.page-title{
  font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:0.1em;
  color:var(--accent);margin-bottom:8px;
}
.page-subtitle{font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:48px}
.section-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:0.1em;
  color:var(--accent2);margin-bottom:20px;margin-top:48px;
}
p{line-height:1.8;color:var(--text);font-size:0.9rem;margin-bottom:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.divider{border:none;border-top:1px solid var(--cell-border);margin:40px 0}


/* ── CSS for the footer contact strip ───────────────────────────────── */
.contact-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px;
  border-top: 1px solid var(--cell-border);
}
.contact-item {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.contact-item a { color: var(--text-dim) }
.contact-item a:hover { color: var(--accent) }
.contact-label {
  color: var(--text-dim);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── MOBILE OPTIMIZATIONS ───────────────────────────────── */
@media (max-width: 640px) {
  nav {
    padding: 0 16px;
    overflow-x: auto;
  }
  
  .nav-name {
    flex-shrink: 0;
  }
  
  .nav-links {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  
  .nav-link {
    padding: 8px 16px;
    flex-shrink: 0;
  }
  
  .nav-link.active {
    border-bottom: 2px solid var(--accent);
    background: rgba(232, 201, 122, 0.08);
  }

}