:root{
  --bg:#9B2C36;
  --ink:#fff;
  --accent:#630A13;
  --card:#ffffff22;
  --shadow:0 8px 28px rgba(0,0,0,.12);
  --link:#0077b5;       
  --github:#fafafa;   
}
*{box-sizing:border-box}
body{
  font-family: Arial, sans-serif;
  margin:0; padding:0;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding-top: clamp(24px, 8vh, 96px);
  background:var(--bg);
  color:var(--ink);
}

/* legacy .nav (harmless) */
.nav{ position:fixed; top:12px; right:12px; display:flex; gap:14px; background:var(--card);
  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); z-index:10; }
.nav a{ text-decoration:none; color:var(--ink); font-weight:600; padding:6px 10px; border-radius:8px; transition:opacity .15s ease; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.nav a:hover{ opacity:.8; }
.nav img.icon { width:24px; height:24px; filter:brightness(0) invert(1); display:block; }

.menu-btn{
  position:fixed; top:12px; right:12px;
  background:var(--card); color:#fff; border:none; padding:12px 20px;
  font-size:1rem; border-radius:8px; box-shadow:var(--shadow); font-weight:600; cursor:pointer; z-index:1001;
}
.sidebar{
  position:fixed; top:0; right:-260px; width:240px; height:100vh;
  background:var(--card); box-shadow:-4px 0 12px rgba(0,0,0,.2);
  padding:60px 20px; display:flex; flex-direction:column; gap:18px;
  transition:right .3s ease; z-index:1000;
}
.sidebar.open{ right:0; }
.sidebar a{ text-decoration:none; color:var(--ink); font-weight:600; padding:10px; border-radius:8px; transition:background .2s; }
.sidebar a:hover{ background:rgba(0,0,0,.05); }
.sidebar img.icon{ width:24px; height:24px; filter: brightness(0) invert(1);}

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:999;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.container{ text-align:center; max-width:650px; padding:24px; background:transparent; }
.profile-pic{
  width:220px; height:220px; border-radius:50%; overflow:hidden;
  border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.2); margin:0 auto 20px;
}
.profile-pic img{ width:100%; height:100%; object-fit:cover; object-position: center 50%; display:block; }

h1{ margin:10px 0; font-size:2.2rem; }
p{ color:var(--ink); margin:0 0 20px; line-height:1.6; }

.links a{ margin:0 10px; text-decoration:none; color:#fff; padding:10px 15px; border-radius:6px; display:inline-block; transition:opacity .2s; }
.links a:hover{ opacity:.85; }
.links a.linkedin{ background:var(--link); }
.links a.github{ background:var(--github); }
.links img.icon{ width:40px; height:40px; margin:0 10px; vertical-align:middle; transition:transform .2s, opacity .2s; }
.links img.icon:hover{ transform:scale(1.1); opacity:.85; }

@media (max-width:480px){
  .nav{ gap:8px; padding:8px 10px; }
  .nav a{ padding:6px 8px; font-weight:600; }
  .profile-pic{ width:180px; height:180px; }
}

/* Projects grid */
#projects{ margin-top:32px; }
#projects h2{ margin:18px 0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card{
  background:var(--card); color:var(--ink); padding:16px; border-radius:12px; box-shadow:var(--shadow); text-align:left;
}
.card h3{ margin:0 0 8px; font-size:1.05rem; }
.card p{ color:var(--ink); }
.card a{ font-weight:600; text-decoration:none; }
.card .thumb{ width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#ddd; margin-bottom:12px; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .actions{ display:flex; gap:10px; margin-top:10px; }
.btn{ display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600; box-shadow:var(--shadow); }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid #e5e5e5; }