/* ---------- HERO ---------- */
header.hero{
  padding:96px 0 64px;
  border-bottom:1px solid var(--line);
}
.kicker{
  font-family:var(--mono);
  font-size:13px;
  color:var(--teal);
  margin:0 0 18px;
  min-height:1.4em;
}
.kicker::after{
  content:"";
  display:inline-block;
  width:8px; height:1em;
  background:var(--teal);
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}
h1.role{
  font-family:var(--mono);
  font-size:clamp(38px,10vw,80px);
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 4px;
  color:var(--amber);
  text-transform:uppercase;
}
p.name{
  font-family:var(--mono);
  font-size:17px;
  color:var(--paper);
  margin:0 0 22px;
}
p.tagline{
  font-size:19px;
  max-width:56ch;
  color:var(--dim);
  margin:0 0 28px;
}
.contact-row{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--mono); font-size:14px;
  color:var(--dim);
}
.contact-row a{color:var(--paper);}

/* ---------- SECTIONS ---------- */
section{padding:56px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
h2.section-title{
  font-family:var(--mono);
  font-size:14px;
  color:var(--teal);
  letter-spacing:0.02em;
  margin:0 0 28px;
  display:flex; align-items:center; gap:10px;
}
h2.section-title::before{
  content:"§";
  color:var(--amber);
}
h2.section-title .num{color:var(--dim);}

p.lede{font-size:17px; color:var(--dim); max-width:64ch;}

/* ---------- SKILLS ---------- */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:18px;
}
.skill-card{
  border:1px solid var(--line);
  padding:16px 18px;
}
.skill-card h3{
  font-family:var(--mono);
  font-size:12px;
  color:var(--amber);
  margin:0 0 10px;
  font-weight:500;
}
.skill-card p{margin:0; font-size:14.5px; color:var(--paper);}

/* ---------- PROJECTS ---------- */
.project{
  position:relative;
  border:1px solid var(--line);
  padding:22px 24px;
  margin-bottom:22px;
}
.project::before,.project::after,
.project .tick-br::before,.project .tick-br::after{
  content:""; position:absolute; width:9px; height:9px;
  border:1px solid var(--amber);
}
.project::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.project::after{top:-1px; right:-1px; border-left:none; border-bottom:none;}
.project .tick-br::before{bottom:-1px; left:-1px; border-right:none; border-top:none;}
.project .tick-br::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}

.project-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:6px 16px; margin-bottom:8px;
}
.project-head h3{
  font-size:19px; margin:0; color:var(--paper);
}
.stack{
  font-family:var(--mono); font-size:12px; color:var(--teal);
}
.project p.desc{margin:0 0 12px; font-size:15px; color:var(--dim);}
.project ul{margin:0; padding-left:18px; font-size:14.5px; color:var(--paper);}
.project ul li{margin-bottom:5px;}
.project .link-row{margin-top:12px; font-family:var(--mono); font-size:13px;}

/* ---------- COLLAB LIST ---------- */
.collab{border-left:2px solid var(--teal); padding-left:16px; margin-bottom:18px;}
.collab h4{margin:0 0 4px; font-size:16px; color:var(--paper);}
.collab p{margin:0; font-size:14.5px; color:var(--dim);}

/* ---------- TIMELINE (experience/education) ---------- */
.tl-item{display:grid; grid-template-columns:110px 1fr; gap:18px; margin-bottom:26px;}
.tl-date{font-family:var(--mono); font-size:13px; color:var(--amber); padding-top:2px;}
.tl-body h4{margin:0 0 4px; font-size:16.5px; color:var(--paper);}
.tl-body .role{font-size:14px; color:var(--teal); margin:0 0 8px;}
.tl-body ul{margin:0; padding-left:18px; font-size:14.5px; color:var(--dim);}
.tl-body ul li{margin-bottom:5px;}

/* ---------- FOOTER ---------- */
footer{padding:56px 0 80px;}
footer h2.section-title{margin-bottom:16px;}
.footer-links{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--mono); font-size:15px;
}
.footer-note{margin-top:34px; font-size:13px; color:var(--dim);}