:root{
  --bg: #060b17;
  --ink: #eaf2ff;
  --muted: #b6c7e6;
  --card: #0b1220;
  --stroke: #1e2a44;
  --brand: #0ea5e9;
  --accent: #16a34a;
  --gap: clamp(12px, 3vw, 24px);
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui, Segoe UI, Inter, Arial}
img,svg{max-width:100%;height:auto;display:block}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gap)}
.section{padding:clamp(16px,4vw,36px) 0}
.stack{display:grid;gap:clamp(20px,3vw,28px)}
.footer{padding:32px 0;color:var(--muted);border-top:1px solid #0f1a30}

/* sticky header */
.sticky{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#081127, #071425);border-bottom:1px solid #0f1a30;backdrop-filter:saturate(1.2) blur(6px)}
.bar{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand{font-weight:800;font-size:clamp(18px, 2.6vw, 24px);text-decoration:none;color:var(--brand)}

.menu{margin-left:auto}
.menu>summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding:8px 10px;border-radius:10px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary span{width:22px;height:2px;background:#bfe2ff;border-radius:2px;display:block}
.nav{display:flex;gap:clamp(8px,2vw,20px);flex-wrap:wrap;margin-left:auto}
.nav a{color:#cfe6ff;text-decoration:none;padding:8px 12px;border-radius:10px}
.nav a:hover{background:#10233a}

@media (max-width: 820px){
  .nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
}

/* hero */
.hero{padding:clamp(8px,2vw,16px) 0}
.hero img{width:100%;border-radius:14px;border:1px solid #123}

/* about */
.about-wrap{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid #16314b;background:#0b1220}

/* type */
h1{font-size:clamp(24px, 5vw, 40px);margin:0 0 6px}
h2{font-size:clamp(20px, 3.8vw, 28px);margin:0 0 12px}
h3{font-size:clamp(18px, 3.2vw, 22px);margin:0 0 10px}
h4{font-size:clamp(16px, 2.8vw, 20px);margin:0 0 6px}
p{font-size:clamp(14px, 2.4vw, 16px);line-height:1.6;color:var(--muted);margin:6px 0 0}

/* buttons */
.btn{
  display:inline-block;background:var(--brand);color:#001;
  padding:10px 14px;border-radius:10px;text-decoration:none;
  font-weight:700;border:1px solid #0b8ec9;transition:.2s transform ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#0c2038;color:#d7e6ff;border-color:#183153}

/* module wrapper */
.module{border:1px solid #11213a;border-radius:14px;background:#081427;padding:16px}
.module>h3{margin:0 0 10px}

/* intro (5-point module overview) */
.intro{margin:10px 0;border:1px solid #11213a;border-radius:12px;background:#0a1b31}
.intro>summary{cursor:pointer;padding:12px 14px;color:#d6e9ff;font-weight:700}
.intro>summary:hover{background:#0b2444}
.intro-grid{
  display:grid;gap:var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  padding:12px 14px 16px;
}
.intro-card{
  background:#0b1326;border:1px solid #11213a;border-radius:12px;padding:12px
}
.intro-card ul{margin:0;padding-left:18px;color:var(--muted)}
.intro-card p{margin:0}

/* projects grid + cards */
.grid{
  display:grid;gap:var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.card{
  background:#0b1220;border:1px solid #1e2a44;border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.card img{border-radius:10px;aspect-ratio:16/9;object-fit:cover;background:#091020}

/* per-project details */
.proj{border-top:1px dashed #1a2a47;padding-top:8px;margin-top:4px}
.proj>summary{cursor:pointer;color:#cfe6ff;padding:6px 0}
.proj-points{display:grid;gap:10px;padding-top:6px}
.proj-points ul{margin:0;padding-left:18px;color:var(--muted)}
.error{color:#ffb4b4}

/* small screens */
@media (max-width: 640px){
  .btn{width:100%;text-align:center}
  .about-wrap{grid-template-columns:80px 1fr}
  .avatar{width:80px;height:80px}
}

/* Hamburger Menu */
.menu {
  position: relative;
  display: inline-block;
}
.menu summary {
  list-style: none;
  cursor: pointer;
  width: 36px;
}
.menu summary::-webkit-details-marker { display:none; }
.menu summary span {
  display:block;
  height:3px;
  background:#333;
  margin:6px 0;
  border-radius:2px;
}
.nav {
  display:none;
  position:absolute;
  top:40px;
  right:0;
  background:white;
  border:1px solid #ddd;
  padding:10px 0;
  width:200px;
  border-radius:8px;
  z-index:999;
}
.menu[open] .nav { display:block; }
.nav a {
  display:block;
  padding:10px 15px;
  text-decoration:none;
  color:#333;
}
.nav a:hover { background:#f2f2f2; }

.top-nav{position:absolute;right:20px;top:20px;}
.top-nav a{color:#6BBF59;margin-left:20px;text-decoration:none;font-weight:600;}
.top-nav a:hover{text-decoration:underline;}


.top-nav {
  position: absolute;
  right: 40px;
  top: 30px;
  display: flex;
  gap: 25px;
}
.top-nav a {
  color: #6BBF59;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}
.top-nav a:hover { text-decoration: underline; }