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

:root{
  --bg:#fafaf8;
  --surface:#fff;
  --text:#1a1a18;
  --muted:#6b6b66;
  --accent:#1d4ed8;
  --accent-light:#eff6ff;
  --border:#e4e4e0;
  --tag-bg:#f1f0ec;
}

body{
  font-family:'DM Mono',monospace;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ── NAV ── */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  border-bottom:1px solid var(--border);
}

.nav-logo{
  font-family:'DM Serif Display',serif;
  font-size:1.25rem;
  letter-spacing:-0.02em;
}

.nav-links{
  display:flex;
  gap:2rem;
}

.nav-links a{
  font-size:0.8rem;
  color:var(--muted);
  text-decoration:none;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:color 0.2s;
}

.nav-links a:hover{color:var(--text)}

/* ── HERO ── */
.hero{
  padding:6rem 3rem 4rem;
  max-width:900px;
}

.hero-tag{
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:8px;
}

.hero-tag::before{
  content:'';
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--accent);
}

h1{
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--text);
  margin-bottom:1.5rem;
}

h1 em{
  font-style:italic;
  color:var(--muted);
}

.hero-desc{
  font-size:0.9rem;
  color:var(--muted);
  line-height:1.8;
  max-width:520px;
  margin-bottom:2.5rem;
}

.hero-actions{
  display:flex;
  gap:1rem;
  align-items:center;
}

/* ── BUTTONS ── */
.btn-primary{
  padding:0.75rem 1.75rem;
  background:var(--text);
  color:var(--bg);
  font-family:'DM Mono',monospace;
  font-size:0.8rem;
  letter-spacing:0.04em;
  border:none;
  cursor:pointer;
  transition:opacity 0.2s;
}

.btn-primary:hover{opacity:0.8}

.btn-secondary{
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--muted);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
  background:none;
  border:none;
  font-family:'DM Mono',monospace;
}

.btn-secondary:hover{color:var(--text)}

/* ── SECTIONS ── */
section{
  padding:5rem 3rem;
  border-top:1px solid var(--border);
}

.section-label{
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3rem;
  display:flex;
  align-items:center;
  gap:12px;
}

.section-label span{
  display:inline-block;
  width:32px;
  height:0.5px;
  background:var(--border);
}

/* ── TECH GRID ── */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}

.tech-item{
  background:var(--surface);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  transition:background 0.2s;
}

.tech-item:hover{background:var(--accent-light)}

.tech-name{
  font-size:0.85rem;
  font-weight:500;
  color:var(--text);
}

.tech-level{
  font-size:0.7rem;
  color:var(--muted);
  letter-spacing:0.06em;
}

.tech-bar{
  width:100%;
  height:2px;
  background:var(--border);
  margin-top:4px;
}

.tech-bar-fill{
  height:100%;
  background:var(--accent);
}

/* ── PROJECTS ── */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
}

.project-card{
  border:1px solid var(--border);
  padding:1.75rem;
  cursor:pointer;
  transition:border-color 0.2s, transform 0.2s;
  background:var(--surface);
}

.project-card:hover{
  border-color:var(--text);
  transform:translateY(-2px);
}

.project-num{
  font-size:0.7rem;
  color:var(--muted);
  letter-spacing:0.1em;
  margin-bottom:1rem;
}

.project-title{
  font-family:'DM Serif Display',serif;
  font-size:1.3rem;
  margin-bottom:0.75rem;
  line-height:1.2;
}

.project-desc{
  font-size:0.8rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:1.25rem;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.tag{
  font-size:0.7rem;
  padding:0.3rem 0.7rem;
  background:var(--tag-bg);
  color:var(--muted);
  letter-spacing:0.04em;
}

/* ── CONTACT ── */
.contact-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.contact-heading{
  font-family:'DM Serif Display',serif;
  font-size:2.5rem;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-bottom:0.75rem;
}

.contact-sub{
  font-size:0.85rem;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:2rem;
}

.contact-links{
  display:flex;
  flex-direction:column;
  gap:0;
}

.contact-link{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.82rem;
  color:var(--muted);
  text-decoration:none;
  padding:0.75rem 0;
  border-bottom:1px solid var(--border);
  transition:color 0.2s;
}

.contact-link:hover{color:var(--text)}

.contact-link-icon{
  width:32px;
  height:32px;
  background:var(--tag-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  flex-shrink:0;
  color:var(--muted);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:0.875rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);
  font-family:'DM Mono',monospace;
  font-size:0.82rem;
  color:var(--text);
  resize:none;
  outline:none;
  transition:border-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--text)}

.contact-form textarea{min-height:100px}

/* ── FOOTER ── */
footer{
  padding:2rem 3rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-text{
  font-size:0.72rem;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  nav,section,.hero,footer{
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  h1{font-size:2.2rem}
  .contact-block{grid-template-columns:1fr}
}